<template>
	<front-list-frame :title="pageName" :count="dataCount" :loading="loading">
		<template slot="button" v-if="isExistButton">
			<el-button size="medium" type="primary" icon="el-icon-plus" v-hasPermi="addedButton" @click="handleAddedData()">申请新课题</el-button>
			<template v-if="selectedData.length > 0">
				<el-button size="medium" type="danger" icon="el-icon-delete" v-hasPermi="batchDeleteButton" plain @click="handleBatchDeleteData()">批量删除</el-button>
			</template>
		</template>
		<el-form slot="query" size="medium" inline v-hasPermi="queryButton">
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="课题名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-checkbox-group slot="content" v-model="selectedData">
			<data-item v-for="(item, index) in tableData" :key="index" :data="item" :auth-btns="handleButtons" @delete="handleDeleteData(item)" />
		</el-checkbox-group>
		<sw-pagination slot="page" :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData" />
	</front-list-frame>
</template>

<script>
import dataItem from './item';
import listMixins from '@/mixins/listMixins';
import tableMixins from '../common/tableMixins';
import frontListFrame from '../common/listFrame';
import { queryUserPageList } from '@/api/business/tbTopic';
export default {
	name: 'topicPage',
	mixins: [listMixins, tableMixins],
	components: { frontListFrame, dataItem },
	data() {
		return {
			pageName: '课题',
			selectedData: []
		};
	},
	computed: {
		listFunction() {
			return eval(queryUserPageList);
		},
		batchDeleteButton() {
			let batchDelete = this.buttons.find((n) => n.field === 'batchDelete');
			return batchDelete?.id;
		},
		frameTopButton() {
			let frameTopBtns = [];
			if (!!this.addedButton) {
				frameTopBtns = [...frameTopBtns, this.addedButton];
			}
			if (!!this.batchDeleteButton) {
				frameTopBtns = [...frameTopBtns, this.batchDeleteButton];
			}
			return frameTopBtns;
		}
	},
	watch: {
		selectedData: {
			handler(val) {
				console.log(val);
			},
			deep: true
		}
	},
	methods: {
		handleAddedData() {
			this.$router.push({ path: '/front/topic/form' });
		},

		handleBatchDeleteData() {}
	}
};
</script>

<style lang="scss" scoped></style>
